<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="car-label">关键字:</div>
      <el-input v-model="listQuery.keyString" placeholder="姓名/手机号/身份证号" style="width: 180px;" class="filter-item" />

      <div class="car-label">贷款银行:</div>
      <el-select v-model="listQuery.checkBank" placeholder="请选择贷款银行" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in banks" :key="item.id" :label="item.bankName" :value="item.id" />
      </el-select>
      <div class="car-label">征信结果:</div>
      <el-select v-model="listQuery.creditResult" style="width: 140px" class="filter-item">
        <el-option v-for="item in results" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <div class="car-label">征信状态:</div>
      <el-select v-model="listQuery.creditStatus" style="width: 140px" class="filter-item">
        <el-option v-for="item in statuses" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <div class="car-label">提交时间:</div>
      <el-date-picker v-model="listQuery.creditTime" placeholder="请选择提交时间" clearable style="width: 130px" class="filter-item" />
      <el-button style="margin-left: 10px" class="filter-item" type="primary" icon="el-icon-search" @click="search">
        搜索
      </el-button>
    </div>
    <ve-table
      :scroll-width="1500"
      :columns="columns"
      :table-data="tableData"
      :border-x="true"
      row-key-field-name="id"
      :border-y="true"
      :row-style-option="rowStyleOption"
      :checkbox-option="checkboxOption"
    />
    <div class="table-pagination">
      <ve-pagination
        :total="totalCount"
        :page-index="pageIndex"
        :page-size="pageSize"
        @on-page-number-change="pageNumberChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>

<style>
  .table-pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>

<script>
import router from '@/router/index'

export default {
  data() {
    return {
      calendarTypeOptions: [],
      // page index
      pageIndex: 1,
      dataTable: [],
      totalCount: 1,
      tableData: [],
      // page size
      pageSize: 10,
      listQuery: {},
      appId: '',
      banks: [],
      results: [{ key: '通过', label: '通过' }, { key: '不通过', label: '不通过' }],
      statuses: [{ key: 0, label: '已申请' }, { key: 1, label: '未申请' }],
      rowStyleOption: {
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      checkboxOption: {
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row, isSelected, selectedRowKeys)
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          console.log(isSelected, selectedRowKeys)
        }
      },
      columns: [
        {
          field: '',
          key: '1',
          // type=checkbox
          type: 'checkbox',
          title: '',
          width: 50,
          align: 'center'
        },
        {
          field: '',
          key: 'a',
          title: '序号',
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1
          }
        },
        { field: 'orderId', key: 'b', title: '订单编号', align: 'center', width: '200px',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (
              <span class={'id-column'} on-click={() => this.gotoDetail('1111111115')}>{row.orderId}</span>)
          } },
        { field: 'customerName', key: 'c', title: '客户姓名', width: '100px' },
        { field: 'customerName', key: 'd', title: '业务关系', width: '100px' },
        { field: 'loanAmount', key: 'e', title: '贷款金额', width: '100px' },
        { field: 'checkBank', key: 'f', title: '贷款银行', width: '100px',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            if (this.banks.length > 0) {
              const list = this.banks.filter((res) => {
                return res.id == row.checkBank
              })
              return list.length > 0 ? list[0].bankName : row.checkBank
            }
          }
        },
        { field: 'serviceGroup', key: 'g', title: '部门', width: '' },
        { field: 'serviceUser', key: 'h', title: '业务员', width: '100px' },
        { field: 'creditStatus', key: 'i', title: '征信状态', width: '100px' },
        { field: 'creditResult', key: 'j', title: '征信结果', width: '100px' },
        { field: 'creditTime', key: 'k', title: '征信提交日期', width: '180px' },
        { field: 'importType', key: 'l', title: '电子签约状态', width: '180px' }
      ]
    }
  },
  computed: {

  },
  created() {
    this.appId = sessionStorage.getItem('appId')
    this.getBankList()
    this.initDatabase()
  },
  methods: {
    /**
     * 跳转详情
     * @date 2021/7/5
     * @param id
     */
    gotoDetail(id) {
      console.log('111111', id, this.$route, this.$router)
      this.$router.push({ path: '/a-content/customer-reference/bank-refer-detail', query: { id: id, source: 'referenceList' }})
    },
    search() {
      this.pageIndex = 1
      this.initDatabase()
    },
    /**
       * 获取银行列表数据
       * @date 2021-05-18
       */
    async getBankList() {
      const param = { appId: await sessionStorage.getItem('appId') }
      const data = await this.$http.post('/auth/bankSetup/listAll', param)
      if (data.code === 200) {
        this.banks = data.data
      }
    },
    // page number change
    pageNumberChange(pageIndex) {
      this.pageIndex = pageIndex
      this.initDatabase()
    },

    // page size change
    pageSizeChange(pageSize) {
      this.pageIndex = 1
      this.pageSize = pageSize
      this.initDatabase()
    },

    // Simulation table data
    async initDatabase() {
      this.tableData = []
      this.listQuery.appid = this.appId

      const data = await this.$http.post('/flow/credit/list/' + this.pageIndex + '/' + this.pageSize, this.listQuery)
      console.log(data)
      if (data.code === 200) {
        this.tableData = data.data.records
        this.totalCount = data.data.total
      } else {

      }

      console.log(this.tableData)
    }
  }
}
</script>
